<template>
  <div>
    <div v-if="loading" id="loader-wrapper">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">登录中...</div>
    </div>

    <h3 v-else :class="colorCss">{{ message }}</h3>
  </div>
</template>

<script>
export default {
  name: "SsoLogin",
  data() {
    return {
      ssoToken: "",
      redirect: undefined,
      message: "",
      colorCss: "",
      loading: false
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        if (route.query) {
          this.ssoToken = route.query.token;
          this.redirect = route.query.redirect;
        }
      },
      immediate: true
    }
  },
  created() {
    this.handleLogin();
  },
  methods: {
    handleLogin() {
      this.loading = true;
      this.$store.dispatch("SsoLogin", this.ssoToken).then(() => {
        this.loading = false;
        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
      }).catch((err) => {
        this.loading = false;
        this.colorCss = "red";
        this.message = err;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.red {
  color: red;
}
</style>
